import React from 'react'
import { Link, TitleBar, Button, Table } from '../../../ui-components'
import styleRoot from '../style'
import { connect } from 'react-redux'
import mime from 'mime-types'
import { help as styleHelp } from './style.fill'
import util from '../../../util'

export default
@connect(({ onboardingTemplate }) => ({ onboardingTemplate  }))
class extends React.Component {

	downloadDocument({ documentId }) {
    this.props.downloadStaffDocument(documentId, res => {
      location.href = res.data.presignedUrl
    })
	}

	componentDidMount() {
    this.props.fetchOnboardingStaffTemplate()
	}

	render() {
    const { onboardingTemplate } = this.props.onboardingTemplate
    const { onboardingDocumentVOs } = onboardingTemplate
		const tableConfig = {
      model: {
        documentName: '文档',
        documentType: '类型',
        documentSize: '大小'
      },
      config: {
        documentSize: '.4',
        documentType: '.4'
      },
      map: {
				documentName: (v, doc) => <Link label={v} onClick={() => this.downloadDocument(doc)}/>,
        documentSize: v => util.size(v)
      }
		}
		return (
			<div>
				<TitleBar
					label="相关文档"
				/>
				<div>
          {
            onboardingDocumentVOs && onboardingDocumentVOs.length ?
            <div
              className={styleHelp}
            >推荐阅读以下文档。后续也可以在登录系统后，点击右上角头像，从展开菜单中下载。</div>
            : null
          }
          
					<Table
						data={onboardingDocumentVOs}
						{...tableConfig}
					/>
				</div>
        <Button 
          label="下一步" 
          className={styleRoot.next} 
          onClick={() => this.props.router.push('/onboarding/staff/complete')}/>
			</div>
		)
	}
}
